<!--
 * @Author: your name
 * @Date: 2021-08-04 11:29:01
 * @LastEditTime: 2021-08-04 14:24:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \wodegit\s-1811A-yangbing\虚拟列表\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     .list-wrap {
        position: relative;
        overflow-y: scroll;
        width: 200px;
        margin: 100px auto;
        box-sizing: border-box;
        border: solid 1px red;
    }

    .list {
        position: absolute;
        top: 0;
        left: 0;
    }

    .list li {
        border: solid 1px rgb(157, 157, 199);
        line-height: 30px;
        width: 100px;
        background: #ccc;
    }
</style>
<body>
    <ul id="app">
        <div class="list-wrap" ref="listWrap" @scroll="scrollListener">
            <div class="scroll-bar" ref="scrollBar"></div>
            <ul class="list" ref="list">
                <li v-for="val in showList">列表:{{ val }}</li>
            </ul>
        </div>
    </ul>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    list:[],        //列表数据
                    height:30,      //每一条数据的高
                    listLength:10,  //显示几条
                    start:0,        //从下标 0 开始
                    end:10,         //到下标 10 结束
                }
            },
            computed: {  //计算属性
                showList() {
                    return this.list.slice(this.start,this.end)
                }
            },
            mounted() {  //生命周期
                for(let key = 0; key < 10000000; key++){
                    this.list.push(key)
                }
                this.$refs.listWrap.style.height = this.height * this.listLength + "px" ;
                this.$refs.scrollBar.style.height = this.height * this.list.length + 'px'
            },
            methods: {
                scrollListener() {
                                //几个=取整  拿到dom节点的滚动条距上边的距离/元素的高  30/30=1
                    this.start = Math.floor(this.$refs.listWrap.scrollTop / this.height)
                              //几个+10
                    this.end = this.start + this.listLength;
                    //当前ul距离上边 = 大盒子的滚动条离上边的距离
                    this.$refs.list.style.top = this.$refs.listWrap.scrollTop + 'px';
                }
            }
         })
    </script>
</body>

</html>